<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据代理</title>
  <style>
    .testColor {
      color: red;
    }
  </style>
</head>
<body>

<!--
1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作
2. 好处: 通过vm对象就可以方便的操作data中的数据
3. 实现:
  1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性
  2). 所有添加的属性都包含get/set方法
  3). 在get/set方法中去操作data中对应的属性
-->
<div id="test">
    <div>
      <!-- <div v-class='testColor'>{{name.nama2.name3}}</div> -->
      <span v-on:click='show'>{{name.name}}</span>
      <!-- <div v-on:click='click'>click</div> -->
      <!-- <div v-html='word'></div> -->
    </div>
</div>

<script type="text/javascript" src="js/compile.js"></script>
<script type="text/javascript" src="js/mvvm.js"></script>
<script type="text/javascript" src="js/observer.js"></script>
<script type="text/javascript" src="js/watcher.js"></script>
<script type="text/javascript">
  const vm = new MVVM({
    el: "#test",
    data: {
      name: {
          name: 'ddddd',
          nama2: {
              name3: '123123'
          }
      },
      word: 'word2222',
      testColor: 'testColor',
    },
    methods: {
          show: function() {
              console.log(this.word);
          },
          click: function() {
              console.log('click');
          }
      }
  })
//   console.log(vm.name)  // 读取的是data中的name,  vm代理对data的读操作
  // vm.word = 'w' // 数据保存到data中的name上, vm代理对data的写操作
  // vm.word = 'w2' // 数据保存到data中的name上, vm代理对data的写操作
  vm.name.name = '11111'
//   console.log(vm.name, vm._data.name)

</script>
</body>
</html>